<template>
  <!-- 头部区域 -->

  <van-nav-bar title="申请退货" left-text="" left-arrow @click-left="onClickLeft" />
  <div class="aui-pay-change">
    <div class="aui-flex">
      <div class="aui-flex-box">
        <h3>已完结</h3>
      </div>
      <div class="aui-pay-zfb">
        <img src="/images/icon-zfb.png" alt="" />
      </div>
    </div>
  </div>

  <!-- 状态及用户信息 -->
  <div class="card-container">
    <van-cell-group class="info-card">
      <van-cell title="姓名 电话" value="张三 13060808099" title-class="cell-title" value-class="cell-value" />
      <van-cell title="地址" value="广东省广州市海珠区财智大厦" title-class="cell-title" value-class="cell-value" />
    </van-cell-group>
  </div>

  <!-- 退款原因选择 -->
  <div class="card-container">
    <van-cell-group class="form-card">
      <van-cell title="退款原因" is-link @click="showReasonPopup = true" :value="selectedReason" title-class="form-title"
        value-class="form-value" />
      <van-popup v-model:show="showReasonPopup" position="bottom" class="popup-container">
        <div class="popup-header">
          <div class="popup-title">请选择退款原因</div>
          <van-button type="text" size="small" @click="showReasonPopup = false" class="close-button">
            取消
          </van-button>
        </div>
        <div class="reason-list">
          <van-radio-group v-model="selectedReason">
            <van-radio v-for="(reason, index) in refundReasons" :key="index" :name="reason.value" class="reason-item">
              {{ reason.label }}
            </van-radio>
          </van-radio-group>
        </div>
        <div class="popup-footer">
          <van-button type="primary" block @click="confirmReason" class="confirm-button">
            确定
          </van-button>
        </div>
      </van-popup>
    </van-cell-group>
  </div>

  <!-- 退款原因输入 -->
  <div class="card-container">
    <van-cell-group class="form-card">
      <van-field v-model="refundReason" label="详细说明" placeholder="请输入退款原因" :maxlength="200" class="form-field"
        label-class="form-label" type="textarea" rows="4" />
      <div class="error-tip" v-if="!refundReason">请填写退款原因</div>
    </van-cell-group>
  </div>

  <!-- 上传凭证区域 -->
  <div class="card-container">
    <van-cell-group class="form-card">
      <van-cell title="上传凭证" class="form-title" />
      <van-uploader :before-read="beforeRead" v-model="fileList" :max-count="3" @oversize="onOversize"
        class="uploader-container">
        <template #preview-cover>
          <div class="preview-cover">
            <van-icon name="delete" class="delete-icon" />
          </div>
        </template>
      </van-uploader>
      <!-- <van-uploader v-model="fileList" multiple :max-count="2" /> -->
      <div class="upload-tip">最多上传3张凭证图片</div>
    </van-cell-group>
  </div>

  <!-- 提交按钮 -->
  <div class="button-container">
    <van-button type="primary" block @click="handleSubmit" class="submit-button">提交</van-button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { showToast } from 'vant';
import { POST } from '../services/request';
import { useRoute, useRouter } from 'vue-router';

const route = new useRoute();
const router = new useRouter();

const orderCode = ref(route.query.orderCode);
const uid = ref(route.query.uid);
const status = ref(route.query.status);
// console.log(status);


const showReasonPopup = ref(false);
const selectedReason = ref('');
const refundReason = ref('');
const fileList = ref([]);
// 定义一个存放图片的数组
const imgList = ref([]);

// 完善的退款原因列表
const refundReasons = [
  { label: '商品质量问题', value: 'quality' },
  { label: '商品与描述不符', value: 'description' },
  { label: '尺寸/规格不符', value: 'size' },
  { label: '颜色差异', value: 'color' },
  { label: '商品破损/有瑕疵', value: 'damage' },
  { label: '发货错误', value: 'shipping' },
  { label: '包装问题', value: 'packaging' },
  { label: '收到商品与订单不符', value: 'order' },
  { label: '商品过期/变质', value: 'expired' },
  { label: '其他原因', value: 'other' }
];


// 返回布尔值
const beforeRead = (file) => {
  // console.log(file);
  if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
    showToast('请上传 jpg/png 格式图片');
    return false;
  }
  return true;
};

// 返回 Promise
const asyncBeforeRead = (file) =>
  new Promise((resolve, reject) => {
    if (file.type !== 'image/jpeg' || file.type !== 'image/png') {
      showToast('请上传 jpg/png 格式图片');
      reject();
    } else {
      if (file.type == 'image/jpeg') {
        const img = new File(['foo'], 'bar.jpg', {
          type: 'image/jpeg',
        });
      }
      if (file.type == 'image/png') {
        const img = new File(['foo'], 'bar.png', {
          type: 'image/png',
        });
      }
      resolve(img);
    }
  }
  );


const goBack = () => {
  // 返回逻辑
  console.log('返回');
};

const confirmReason = () => {
  showReasonPopup.value = false;
};

const onOversize = () => {
  // 处理图片超出数量限制
  console.log('最多上传3张图片');
};

const handleSubmit = async () => {

  if (!refundReason.value || !selectedReason.value) {
    return;
  }

  imgList.value = []
  for (let i = 0; i < fileList.value.length; i++) {
    const fList = fileList.value[i];
    // console.log(file,'99999999999');

    const fimgList = {
      'name': fList.file.name,
      'size': fList.file.size,
      'type': fList.file.type,
      // lastModified
      'lastModified': fList.file.lastModified,
      'base64Content': fList.content
    }
    imgList.value.push(fimgList)
  }
  // console.log(imgList.value,'imgList.value');
  // 提交逻辑
  const confirmRes = await POST({
    url: '/Order/refund',
    params: {
      // 选择的退款原因
      selectedReason: selectedReason.value,
      // 详细描述退款原因
      refundReason: refundReason.value,
      // 存储的文件列表
      fileList: JSON.stringify(fileList.value),
      // 存放图片的详情
      fimg: JSON.stringify(imgList.value),
      uid: uid.value,
      orderCode: orderCode.value,
      status: status.value,
    }
  })
  if (confirmRes.code) {
    showToast(confirmRes.msg);
    router.push('/myOrderList');
  } else {
    showToast(confirmRes.msg);
  }
  // console.log(fileList.value);

  // console.log('提交数据：', {
  //   selectedReason: selectedReason.value,
  //   refundReason: refundReason.value,
  //   fileList: fileList.value
  // });
};

// 返回
const onClickLeft = () => history.back();
</script>

<style scoped>
/* 头部样式 */
.header-container {
  display: flex;
  align-items: center;
  height: 48px;
  background-color: #ff7d00;
  color: #fff;
  padding: 0 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.back-icon {
  font-size: 20px;
  margin-right: 12px;
  cursor: pointer;
}

.header-title {
  font-size: 18px;
  font-weight: 500;
}

/* 卡片容器 */
.card-container {
  margin: 12px;
}

.info-card,
.form-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

/* 单元格样式 */
.cell-title {
  color: #666;
  font-size: 14px;
}

.cell-value {
  color: #333;
  font-size: 14px;
}

/* 表单样式 */
.form-title {
  color: #333;
  font-size: 15px;
  font-weight: 500;
  padding: 16px;
}

.form-value {
  color: #666;
  font-size: 14px;
}

.form-label {
  color: #333;
  font-size: 15px;
  font-weight: 500;
}

.form-field {
  padding: 8px 0;
}

/* 弹窗样式 */
.popup-container {
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  height: 60%;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f5f5f5;
}

.popup-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.close-button {
  color: #999;
}

.reason-list {
  padding: 12px 0;
  max-height: calc(100% - 100px);
  overflow-y: auto;
}

.reason-item {
  padding: 12px 16px;
  border-bottom: 1px solid #f5f5f5;
}

.popup-footer {
  padding: 16px;
  border-top: 1px solid #f5f5f5;
}

.confirm-button {
  background-color: #ff7d00;
  border: none;
  border-radius: 24px;
  height: 44px;
}

/* 错误提示 */
.error-tip {
  color: #f56c6c;
  font-size: 12px;
  padding: 0 16px;
  margin-top: 4px;
}

/* 上传区域 */
.uploader-container {
  padding: 0 16px 16px;
}

.upload-tip {
  color: #999;
  font-size: 12px;
  padding: 0 16px 16px;
}

.preview-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
}

.delete-icon {
  font-size: 18px;
}

/* 按钮样式 */
.button-container {
  margin: 24px 12px;
}

.submit-button {
  height: 48px;
  border-radius: 24px;
  background-color: #ff7d00;
  border: none;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(255, 125, 0, 0.2);
  transition: all 0.2s;
}

.submit-button:active {
  background-color: #e66e00;
  transform: translateY(2px);
}

.van-popup--bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 512px;
}

.popup-footer[data-v-02e78245] {
  padding: 0px;
  /* height: 600px;  */
  /* margin-bottom: 20px; */
  /* border-top: 1px solid #f5f5f5; */
}

.popup-container[data-v-02e78245] {
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  height: 75%;
}
</style>